import React,{Component} from 'react'
import data from './data.json'
import './list.css'

export default class List extends Component{

  state = {
    projectList:data,
    newProjectList:null,
    //搜索的项目名称
    search:'',
    //项目名称或者开始日期
    sortType:'Project Name',
    //按升序还是降序
    sortRules:"Ascending"
  }
  //生命周期勾子函数
  componentWillReceiveProps({projectObj}){

    //必须有，不然首次
    if ( !projectObj ) return
    let projectList = [...this.state.projectList]
    let arr = projectList.filter(item => item.id === projectObj.id)
    if (arr.length !== 0) return
    projectList.unshift(projectObj)
    this.setState({projectList})
  }	

  //删除
  deleteComment = (id)=>{
    //询问是否删除
    if ( !window.confirm('Confirm the deletion?')) return
    let projectList = [...this.state.projectList]
    //如果id跟已有的相同则添加
    projectList = projectList.filter((item)=>{
      return item.id !== id
    })
    this.setState({projectList})
  }
  //监听输入框
  handleChange = (ev) => {

    let search = ev.target.value.trim()
    this.setState({search})
    if ( !search ) {
      this.setState({newProjectList:null})
      return
    }
    
    let { projectList } = this.state
    let newProjectList = projectList.filter(item => item.name.match(search))
    this.setState({newProjectList})

  }


  handleChangeSortType = (ev) =>{
    let type = ev.target.value
    this.setState({sortType: type});
    let { sortType,projectList,newProjectList } = this.state
    this.rulesFn(type,sortType,projectList,newProjectList)
  }

  handleChangeSortRules = (ev) =>{
    let rules = ev.target.value
    this.setState({sortRules: rules}); 
    let { sortType,projectList,newProjectList } = this.state
    this.rulesFn(rules,sortType,projectList,newProjectList)
  }


  //根据开始日期，按升序或降序排序的函数
  startRulesFn = (flag,projectList,newProjectList) =>{
    let arr1
    let arr2
    if ( flag){
       arr1 = projectList.sort(function(a,b) {
        return a.start > b.start ? 1 : -1
      })
      if ( !newProjectList) return
       arr2 = newProjectList.sort(function(a,b) {
        return a.start > b.start ? 1 : -1
      })
    }else{
        arr1 = projectList.sort(function(a,b) {
        return a.start < b.start ? 1 : -1
      })
      if ( !newProjectList) return
        arr2 = newProjectList.sort(function(a,b) {
        return a.start < b.start ? 1 : -1
      })
    }
    this.setState({projectList:arr1,newProjectList:arr2})

  }

  //根据项目名称，按升序或降序排序的函数
  nameRulesFn = (flag,projectList,newProjectList) => {
    let arr1
    let arr2
    if ( flag ){
      arr1 = projectList.sort(function(a,b) {
        return a.name.localeCompare(b.name)
      })
      if ( !newProjectList) return
      arr2 = newProjectList.sort(function(a,b) {
        return a.name.localeCompare(b.name)
      })
    }else{
      arr1 = projectList.sort(function(a,b) {
        return b.name.localeCompare(a.name)
      })
      if ( !newProjectList) return
      arr2 = newProjectList.sort(function(a,b) {
        return b.name.localeCompare(a.name)
      })
    }
    this.setState({projectList:arr1,newProjectList:arr2})
  }

  //封装函数,功能:判断是按开始日期升序/降序,项目名称升序/降序
  rulesFn = (rules,sortType,projectList,newProjectList) => {
    if ( rules === 'Ascending' && sortType === "Start Date"){
      this.startRulesFn(true,projectList,newProjectList)
    }else if ( rules === 'Descending' && sortType === "Start Date"){
      this.startRulesFn(false,projectList,newProjectList)
    }else if( rules === 'Ascending' && sortType === "Project Name"){
      this.nameRulesFn(true,projectList,newProjectList)
    }else{
      this.nameRulesFn(false,projectList,newProjectList)
    }
  }

  render(){
    let {projectList,newProjectList} = this.state
    return (
      <div className="col-md-12">
        
        <div className="row">
          <div className="col-md-2">
          <input onChange={this.handleChange} value={this.state.search} type="text" className="form-control" placeholder="Search" />
          </div>

          <div className="col-md-1 sort">Sort By</div>
          <div className="col-md-2">
            <select className="form-control" value={this.state.sortType} onChange={this.handleChangeSortType}>
              <option value="Project Name">Project Name</option>
              <option value="Start Date">Start Date</option>
            </select>
          </div>

          <div className="col-md-1 sort">Sort order</div>
          <div className="col-md-2">
          <select className="form-control" value={this.state.sortRules} onChange={this.handleChangeSortRules}>
              <option value="Ascending">Ascending</option>
              <option value="Descending">Descending</option>
            </select>
          </div>
        </div>
        <ul className="list-group">
          {
            !newProjectList &&
            projectList.map((item)=>{
              return (
                <li className="project-list" key={item.id}>
                  <div className="row">
                    <div className="col-md-6 del-icon-box" >
                      <span  onClick={()=>{this.deleteComment(item.id)}} className="del-icon">X</span>
                      <span>{item.name}</span>
                    </div>
                    <div className="col-md-6">
                      <div className="row">
                        <div className="col-md-12">Start Date:{item.start}  End Date:{item.end}</div>
                      </div>
                      <div className="row">
                        <div className="col-md-12">{item.description}</div>
                      </div>
                    </div>
                  </div>
                </li>
              )
            })
          }
          {
            newProjectList &&
            newProjectList.map((item)=>{
              return (
                <li className="project-list" key={item.id}>
                  <div className="row">
                    <div className="col-md-6 del-icon-box" >
                      <span  onClick={()=>{this.deleteComment(item.id)}} className="del-icon">X</span>
                      <span>{item.name}</span>
                    </div>
                    <div className="col-md-6">
                      <div className="row">
                        <div className="col-md-12">Start Date:{item.start}  End Date:{item.end}</div>
                      </div>
                      <div className="row">
                        <div className="col-md-12">{item.description}</div>
                      </div>
                    </div>
                  </div>
                </li>
              )
            })
          }

         
        </ul>
        <h2 style={{display:projectList.length === 0 ? 'block':'none'}}>No content yet, please add it first！！！</h2>
      </div>
    )
  }
}